'use client'

import { useState, useEffect } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { TrendingUp, TrendingDown, MessageSquare, Twitter, Users } from 'lucide-react'

interface SentimentRadarProps {
  symbol: string
}

interface SentimentData {
  overall: number
  social: number
  news: number
  onChain: number
  sources: {
    twitter: number
    reddit: number
    news: number
    whale: number
  }
}

export function SentimentRadar({ symbol }: SentimentRadarProps) {
  const [sentiment, setSentiment] = useState<SentimentData>({
    overall: 72,
    social: 68,
    news: 75,
    onChain: 78,
    sources: {
      twitter: 65,
      reddit: 70,
      news: 75,
      whale: 85
    }
  })

  const getSentimentColor = (score: number) => {
    if (score >= 70) return 'text-green-600'
    if (score >= 40) return 'text-yellow-600'
    return 'text-red-600'
  }

  const getSentimentLabel = (score: number) => {
    if (score >= 70) return 'Bullish'
    if (score >= 40) return 'Neutral'
    return 'Bearish'
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Sentiment Radar</span>
          <Badge variant="outline">{symbol}</Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="text-center">
          <div className="text-3xl font-bold text-green-600">{sentiment.overall}</div>
          <div className="text-sm text-muted-foreground">Overall Sentiment</div>
          <div className={`text-sm font-medium ${getSentimentColor(sentiment.overall)}`}>
            {getSentimentLabel(sentiment.overall)}
          </div>
        </div>

        <div className="space-y-3">
          <div>
            <div className="flex justify-between text-sm mb-1">
              <span className="flex items-center">
                <Twitter className="h-3 w-3 mr-1" />
                Social Media
              </span>
              <span className={getSentimentColor(sentiment.social)}>{sentiment.social}%</span>
            </div>
            <Progress value={sentiment.social} className="h-2" />
          </div>

          <div>
            <div className="flex justify-between text-sm mb-1">
              <span className="flex items-center">
                <MessageSquare className="h-3 w-3 mr-1" />
                News Sentiment
              </span>
              <span className={getSentimentColor(sentiment.news)}>{sentiment.news}%</span>
            </div>
            <Progress value={sentiment.news} className="h-2" />
          </div>

          <div>
            <div className="flex justify-between text-sm mb-1">
              <span className="flex items-center">
                <Users className="h-3 w-3 mr-1" />
                On-Chain Activity
              </span>
              <span className={getSentimentColor(sentiment.onChain)}>{sentiment.onChain}%</span>
            </div>
            <Progress value={sentiment.onChain} className="h-2" />
          </div>
        </div>

        <div className="border-t pt-4">
          <h4 className="font-semibold mb-2 text-sm">Source Breakdown</h4>
          <div className="space-y-2">
            {Object.entries(sentiment.sources).map(([source, score]) => (
              <div key={source} className="flex justify-between items-center">
                <span className="text-sm capitalize">{source}</span>
                <div className="flex items-center space-x-2">
                  <span className={`text-sm ${getSentimentColor(score)}`}>{score}%</span>
                  {score >= 70 ? (
                    <TrendingUp className="h-3 w-3 text-green-600" />
                  ) : (
                    <TrendingDown className="h-3 w-3 text-red-600" />
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
